<template>
    <div class="container buryingConfig" style="width:99%;margin-top:-25px;">
        <div class="pageTile">{{pageName}}</div>
        <div class="pageCont">
            <div class="questionTitle" v-for="item in pageData" :key="item.id">
                <p>{{item.question}}</p>
                <span class="questionConts" v-for="son in item.questionOptions" :key="son.id">
                    {{son.optionDescription}}
                    <i
                        @click="answerNumberClick(son,item.id)"
                        :questionId="item.id"
                    >【{{son.answerNumber}}】</i>
                </span>
                <p v-if="item.childList" style="margin-left:10px">
                    <span class="questionConts" v-for="sson in item.childList">
                        {{sson.question}}{{sson.answerShort}}
                        <el-button v-if="sson.questionType==3" :size="size" type="primary" @click="exportFile(item.id)">导出</el-button>
                    </span>
                </p>
                <!-- 简答导出 -->
                <el-button :size="size" v-if="item.questionType==3" type="primary" @click="exportFile(item.id)">导出</el-button>
            </div>
        </div>
        <!-- 分中心列表 -->
        <el-dialog
            title="分中心列表"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose"
            center
        >
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号" width="180"></el-table-column>
                <el-table-column prop="centerCode" label="分中心编码" width="180"></el-table-column>
                <el-table-column prop="centerName" label="分中心名称"></el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="pageRequest.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageRequest.total"
            ></el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button :size="size" @click="dialogVisible = false">取 消</el-button>
                <el-button :size="size" type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
    name: "AnswerFile",
    components: {
        CrmTable,
        KtButton
    },
    data() {
        return {
            size: "small",
            loading: false,
            columns: [
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "centerCode", label: "分中心编码", minWidth: 220 },
                { prop: "centerName", label: "分中心名称", minWidth: 120 }
            ],
            pageRequest: { pageNum: 1, pageSize: 10 },

            pageResult: {
                content: []
            },
            pageData: [],
            dialogVisible: false,
            pageName: this.$route.query.pageName,
            tableData: [],
            params: {
                questionid: "",
                optionId: "",
                pageNum: 1,
                pageSize: 10
            },
            exportParams:''
        };
    },
    methods: {
        // 获取分页数据
        getPageData: function() {
            this.loading = true;
            // this.queryBox.pageSize = this.pageRequest.pageSize;
            // this.queryBox.pageNum = this.pageRequest.pageNum;
            // this.queryBox.questionnaireId=this.$route.query.id
            // this.pageResult.content = this.data;
            this.loading = false;

            this.$api.agent
                .questionnaireList({ questionnaireId: this.$route.query.id })
                .then(res => {
                    let content = { content: res.data, totalSize: res.total };
                    this.pageData = content.content;
                    this.loading = false;
                });
        },
        reset(queryBox) {
            this.$refs.queryBox.resetFields();
            this.queryBox.startDate = "";
            this.queryBox.endDate = " ";
            this.queryBox.url = "";
            this.queryBox.bid = "";
            this.queryBox.buryName = "";
            this.queryBox.bName = "";
            this.queryBox.id = "";
            this.queryBox.platform = "";
            this.value2 = "";
            this.findPage(null);
        },
        handleEdit(params) {
            this.$router.push({
                path: "/Answer/AnswerDetails",
                query: {
                    id: params.row.id
                }
            });
        },
        answerNumberClick(params, questionid) {
            this.dialogVisible = true;
            // 
            // 
            this.params.questionid = questionid;
            this.params.optionId = params.id;
            this.getCenterList(this.params);
        },
        getCenterList(data) {
            
            this.$api.agent
                .centerList({
                    questionId: data.questionid,
                    optionId: data.optionId,
                    pageNum: data.pageNum,
                    pageSize: data.pageSize
                })
                .then(res => {
                    this.tableData = res.data;
                    this.pageRequest.total = res.total;
                    // this.pageResult.totalSize = res.total;
                });
        },
        handleSizeChange(params) {
            this.params.pageSize = params;
            this.getCenterList(this.params);
        },
        handleCurrentChange(params) {
            this.params.pageNum = params;
            this.getCenterList(this.params);
        },
        handleClose() {
            this.dialogVisible = false;
        },
        // 导出
        exportFile(data) {
            axios({
                method: "get",
                url:
                    baseUrl + "/questionnaire/shortAnswerListExport?questionId="+data,
                // questionId : data
            }).then(res => {
                window.open(res.request.responseURL);
            });
        }
    },
    mounted() {
        this.getPageData();
    }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.pageTile {
    font-weight: bold;
    font-size: 25px;
    margin: 20px 0;
}
.pageCont {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: left;
    .questionConts {
        i {
            color: #333;
            color: red;
            font-style: normal;
            cursor: pointer;
        }
    }
}
</style>
